<template>
	<view>
		<view style="width: 100%;flex-wrap: nowrap;padding-top: 15px;">
			<view>
				<text style="color: gray;margin:15rpx 40rpx;">时间跨度:</text>
				<el-radio-group v-model="radio1" size="medium" @change="change">
					<el-radio-button label="30天"></el-radio-button>
					<el-radio-button label="15天"></el-radio-button>
					<el-radio-button label="7天"></el-radio-button>
				</el-radio-group>
			</view>
		</view>

		<view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>

		<view class="charts-box" style="margin-top: 50px;">
			<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
		</view>
	</view>

</template>

<script>
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		data() {
			return {
				radio1: "15天",
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FC8452", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},

				chartData1: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
					color: ["#9A60B4", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}

			};
		},
		onReady() {
			this.getServerData(15);
			this.getServerData1(15);
		},
		async onLoad() {

		},
		onShow() {

		},
		methods: {
			async change(e) {
				if (e == "30天") {
					this.getServerData(30);
					this.getServerData1(30);
					return;
				}
				if (e == "15天") {
					this.getServerData(15);
					this.getServerData1(15);
					return;
				}
				if (e == "7天") {
					this.getServerData(7);
					this.getServerData1(7);
					return;
				}
			},
			async getServerData(limitnum) {
				let datas = await db.collection('a_datas').where({ type: 0 }).orderBy('date_time', 'desc').limit(
					limitnum).get()
				console.log("datas=", datas.result.data);
				//获取20天的日期
				let dates = vk.pubfn.arrayObjectGetArray(datas.result.data, "date").reverse(); //reverse()表示倒序输出
				for (var i = 0; i < dates.length; i++) {
					dates[i] = dates[i].replace("2022-", "")
				}
				//新用户数
				let xinyonghushu = vk.pubfn.arrayObjectGetArray(datas.result.data, "xyhs").reverse();
				//当日充值人数
				let chongzhirenshu = vk.pubfn.arrayObjectGetArray(datas.result.data, "drczrs").reverse();
				let res = {
					categories: dates,
					series: [{
							name: "新用户数",
							data: xinyonghushu
						},
						{
							name: "付费人数",
							data: chongzhirenshu
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},

			async getServerData1(limitnum) {
				let datas = await db.collection('a_datas').where({ type: 0 }).orderBy('date_time', 'desc').limit(
					limitnum).get()
				console.log("datas=", datas.result.data);
				//获取20天的日期
				let dates = vk.pubfn.arrayObjectGetArray(datas.result.data, "date").reverse(); //reverse()表示倒序输出
				for (var i = 0; i < dates.length; i++) {
					dates[i] = dates[i].replace("2022-", "")
				}
				//当日充值笔数
				let chongzhibishu = vk.pubfn.arrayObjectGetArray(datas.result.data, "drczbs").reverse();
				//当日充值金额
				let chongzhijine = vk.pubfn.arrayObjectGetArray(datas.result.data, "drcz").reverse();
				let res = {
					categories: dates,
					series: [{
							name: "充值笔数",
							data: chongzhibishu
						},
						{
							name: "充值金额",
							data: chongzhijine
						}
					]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res));
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		margin-top: 50rpx;
		width: 100%;
		height: 300px;
	}

	.charts-box1 {
		margin-top: 70rpx;
		width: 31%;
		height: 300px;
	}
</style>
